<template>
    <view class="wrap" :class="vi_pageSize">
		<headbar fixed
			leftType="_user"
			leftIcon=""
			leftTextSmall
			rightIcon="icon-gengduo"
			:statusBar="true"
			@clickRight="openMenu">
			<picker class="areaPicker" range-key="name"
				:range="caches.wardList"
				:value="caches.wardIndex"
				@change="changeWard">
				{{caches.wardList[caches.wardIndex] ? caches.wardList[caches.wardIndex].name : ""}}
				<text class="iconfont icon-xiangzuo"></text>
			</picker>
            <view class=""></view>
		</headbar>

        <view class="header_list">
            <view class="tabs fontSize-sm">
				<tabs :tabs="tabsData" :current="tabCurrent" @tabChange="tabChange"></tabs>
                <text class="tip">共{{inPatientList.length}}人</text>
            </view>
        </view>

        <view class="plist">
			<view class="empty fontSize-lg" v-if="!inPatientList.length">暂无数据</view>
            <view class="box" :key="index" v-for="(item, index) in inPatientList">
                <view class="patientInfo">
                    <view class="head fontSize-lg-small">
                        <text>{{ item.currentBedNo || '' }}床</text>
                        <i class="iconfont icon-shoucang"></i>
                    </view>
					<view class="body" @click="detail(index)">
						<view class="title fontSize-lg-small">
						    <text>{{ item.patientName || '' }}</text>
						</view>
						<view class="tips fontSize-md-small">
						    <text>{{ caches.dic["dicSex"] ? caches.dic["dicSex"][item.patientSex] : "" }}</text>
							<text>{{ item.patientAgeYear || '' }}</text>
							<text>{{ item.patientPhone || '' }}</text>
						</view>
						<view class="fontSize-md-small">
						    <text>{{ item.diseaseName || '' }}</text>
						</view>
						<view class="amount fontSize-md-small">
						    <text><span>￥</span>{{ item.ex_selowe.toFixed(2) }}</text>
						</view>
						<view class="fontSize-md-small">
						    <text>{{ item.diagnosisDoctorName || '' }}</text>
						</view>
						<!-- <view class="fontSize-md-small">
						    <text>{{ item.ex_inhospitalDateStr }}</text>
						</view> -->
					</view>
                </view>
                <view class="bot" :class="'lv'+item.nurseLevel">住院{{ item.ex_inhospitalDay || '' }}天</view>
            </view>
        </view>
		
        <view class="filterBtn" @click="openFilter">
            <text>筛选</text>
        </view>
		
        <!-- 过滤器 -->
		<filter-box ref="filterBox" :itemList="filterList" @change="filterChange"></filter-box>
		<!-- 菜单 -->
		<right-top-menu ref="menuBox" :options="menuOption"></right-top-menu>
    </view>
</template>

<script>
    import headbar from '@/components/controler/headbar/main.vue'
    import tabs from '@/components/controler/tabs.vue'
	import filterBox from '@/components/controler/filterBox.vue'
	import rightTopMenu from '@/components/module/rightTopMenu.vue'
	
    export default {
        components: {
			headbar,
			tabs,
			filterBox,
			rightTopMenu
        },
        data() {
            return {
				inPatientList:[],//页内病人列表（从缓存拷贝）
				dataLoading:{
					value:false
				},
				tabsData:[
					{name:"本科室", key:"科室", width:4},
					{name:"我的", key:"我的", width:4},
				],
				tabCurrent:0,
				filterList:[
					{
						style:"picker",
						action:"filter",
						actionType:"value",
						title:"护理等级",
						showValue:"全部",
						options:"dicNurseLevel",
						fieldKey:"nurseLevel",
						value:"",
					},
					{
						style:"picker",
						action:"filter",
						actionType:"value",
						title:"入院情况",
						showValue:"全部",
						options:"dicPatientCondition",
						fieldKey:"inpatientCondition",
						value:""
					},
					{
						style:"picker",
						action:"filter",
						actionType:"value",
						title:"在院状态",
						showValue:"全部",
						options:"dicInhospitalStates",
						fieldKey:"inhospitalState",
						value:""
					},
					{
						style:"switch",
						action:"filter",
						actionType:"max",
						title:"欠费",
						fieldKey:"ex_selowe",
						value:0,
						open:false
					},
					{
						style:"switch",
						action:"sort",
						title:"按入院时间排序",
						fieldKey:"inhospitalDate",
						value:"asc",
						open:false
					},
				],
				actions:{},
				menuOption:{
					patientStateCurr: "inHospital",
					useGroup:["dataManager", "logout"]
				}
            };
        },
        computed: {
			patientCount:function(){
				return this.inPatientList.length
			}
		},
        methods: {
			//进入详情
            detail(index) {
				this.$store.dispatch("currPatient/changeIndex",{
					data:index
				})
                setTimeout(() => {
					this.$api.linkTo("/pages/patientDetail/patientDetail");
                },500)
            },
			openFilter(){
				this.$refs.filterBox.open()
			},
			openMenu() {//右上角弹窗
			    this.$refs.menuBox.open()
			},
			filterChange(obj){
				console.log("筛选器变更:",obj);
				this.actions = obj;
				this.filtering()
			},
			//执行筛选
			filtering(){
				//加入科室条件
				let dutyNurserRange = {
					func: "value",
					key: "dutyNurserRange",
					value: this.$api.objFind(this.$enum.dutyNurserRange, {value: this.tabsData[this.tabCurrent].key}) ||""
				}
				if(!this.actions.filter || !this.actions.filter.length){
					this.actions.filter = [dutyNurserRange]
				}else{
					let idx = this.$api.arrFind(this.actions.filter, {
						key: "key",
						value: "dutyNurserRange",
						format: "index"
					})
					if(idx != -1){
						this.actions.filter[idx] = dutyNurserRange;
					}else{
						this.actions.filter.push(dutyNurserRange);
					}
				}
				//过滤
				this.inPatientList = this.$api.arrFilt(this.caches.patientList, this.actions.filter);
				//排序
				if(this.actions.sorter && this.actions.sorter.length){
					this.inPatientList = this.$api.arrSort(this.inPatientList, this.actions.sorter);
					delete this.actions.sorter;
				}
			},
			//tab变更
			tabChange(e) {
				if(this.tabCurrent != e){
					this.tabCurrent = e;
					this.filtering()
				}
			},
			//变更病区
			changeWard(e){
				this.$store.dispatch("currPatient/changeWard",{
					data:e.target.value,
					success:()=>{
						//刷新并过滤
						this.inPatientList = this.$api.clone(this.caches.patientList);
						this.filtering();
					}
				})
			},
            //下载病人数据
            getPatientData({page=1, add=false}={}){
				//获取字典
				this.$store.dispatch("dic/getDics",{
					key:"dicSex,dicPatientCondition,dicNurseLevel,dicInhospitalStates"
				});
            	//下载本科室病人数据到缓存
            	this.$store.dispatch('currPatient/getPatientData', {
					pageNumber: page,
					patientId: this.caches.currPatient.patientId || "",
					currentWardId: this.caches.wardIndex || "",
					dataIncrement: add,
					success:(resData)=>{
						//拷贝并过滤
						this.inPatientList = this.$api.clone(this.caches.patientList);
						this.filtering();
					},
            	}, this.dataLoading);
            },
        },
		onLoad() {
			this.getPatientData();
		}
    };
</script>

<style lang="scss" scoped>
.areaPicker{
	display: flex;
	align-items: center;
}
.header_list{
	position: sticky;
	top:calc(#{$uni-navbar-hight} + var(--status-bar-height));
	z-index: 1;
	height: $uni-tabsbar-hight;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: $uni-color-bg;
	border-bottom: 1px solid $uni-color-border-light;
	.tabs{
		width: 100%;
		position: relative;
		.tip{
			position: absolute;
			right: 0.5em;
			top:calc(50% - 0.75em)
		}
	}
}

.plist {
	display:flex;
	flex-wrap:wrap;
	align-content: flex-start;
	overflow-y:auto;
	padding: 0.5em;
	margin-bottom: $uni-footButtonbar-hight;
	box-sizing:border-box;
	background-color: $uni-color-bg-second;
	min-height: calc(100vh - #{$uni-navbar-hight} - #{$uni-footButtonbar-hight} - #{$uni-tabsbar-hight} - var(--status-bar-height));//底3em，tab高2.5
	.box{
		box-sizing:border-box;
		padding: 0.5em;
		position:relative;
		.patientInfo{
			line-height: 1.5;			
			border:1px solid $uni-color-border;
			border-bottom: 0;
			border-top-left-radius: $uni-radius-md;
			border-top-right-radius: $uni-radius-md;
			background-color: $uni-color-bg;
			view{
				margin-bottom: 0.25em;
				color: $uni-color-font-light;
			}
			.head{
				display:flex;
				justify-content:space-between;
				align-items: center;
				color: $uni-color-font;
				text{font-weight: bold;}
				padding: 0.25em 0.5em;
                background-color: $uni-color-bg-second;
                border-top-left-radius: $uni-radius-md;
                border-top-right-radius: $uni-radius-md;
				.icon-shoucang{
					// color: $uni-color-font-yellow;
				}
			}
			.body{
				overflow-y: auto;
				height: 9.5em;
                padding: 0.25em 0.5em;
				margin-bottom: 0;
				view:last-child{margin-bottom: 0;}
				.title{
					color: $uni-color-font;
					text{font-weight: bold;}
				}
				.tips{
					text{margin-right: 0.5em;}
					text:last-child{margin-right: 0;}
				}
				.amount{
					color: $uni-color-font-amount;
				}
			}
		}
		.bot{
			height:2em;
			line-height: 2em;
			text-align: center;
			border:1px solid $uni-color-border;
			border-top: 0;
			border-bottom-left-radius: $uni-radius-lg;
			border-bottom-right-radius: $uni-radius-lg;
			font-weight: bold;
			// box-shadow: 0 0 0.2em $uni-color-shadow;
			&.lv0{background-color:$uni-color-nurseLevel0;}
			&.lv1{background-color:$uni-color-nurseLevel1;}
			&.lv2{background-color:$uni-color-nurseLevel2;}
			&.lv3{background-color:$uni-color-nurseLevel3;}
		}
	}
}
.filterBtn{
	position:fixed;
	bottom:0;
	width:100%;
	height:$uni-footButtonbar-hight;
	background-color:$uni-color-button-gray;
	border-top:1px solid $uni-color-border;
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing: border-box;
}


.pageSize-xs .plist .box,
.pageSize-sm .plist .box{
	width: 50%;
}
.pageSize-md .plist .box{
	width: 33.33%;
}
.pageSize-lg .plist .box{
	width: 25%;
}
	
</style>
